/*
 * @Author: xiaosihan 
 * @Date: 2022-07-11 07:51:56 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-08-23 20:44:14
 */
import { useEffect } from "react";
import homeRenderer from "./homeRender";
import homeStore from "./homeStore";
import styles from './index.module.less';
import DeviceList from './component/DeviceList/DeviceList';
// 首页
const Home = () => {


    useEffect(() => {

        // 设置设备数据
        homeStore.setDeviceDatas([
            {
                id: "1",
                name: "设备1",
                url: "./monitor.glb",
                x: -11.07,
                y: 22.4466,
                z: 50.977,
                textContainer: "设备1",
                theta: 0,
                phi: 0,
                pitch: 0,
            },
            {
                id: "2",
                name: "设备2",
                url: "./monitor.glb",
                x: -12.71,
                y: 22.447,
                z: 51.053,
                textContainer: "设备2",
                theta: 0,
                phi: 0,
                pitch: 0,
            },
            {
                id: "3",
                name: "设备3",
                url: "./monitor.glb",
                x: -19.94,
                y: 9.89,
                z: 76.175,
                textContainer: "设备3",
                theta: 0,
                phi: 0,
                pitch: 0,
            }
        ]);

        // 点击设备的回调
        homeRenderer.addEventListener("click", e => {
            console.log(e);
        });
        console.log(homeRenderer);
    }, []);


    return (
        <div className={styles.home}>
            <div ref={dom => homeRenderer.setContainer(dom)} className={styles.container}></div>
            <div className={styles.flor}>
                <div className={styles.florItem} onClick={() => homeStore.setShowFlor(1)}>1</div>
                <div className={styles.florItem} onClick={() => homeStore.setShowFlor(2)}>2</div>
                <div className={styles.florItem} onClick={() => homeStore.setShowFlor(3)}>3</div>
                <div className={styles.florItem} onClick={() => homeStore.setShowFlor(4)}>4</div>
                <div className={styles.florItem} onClick={() => homeStore.setShowFlor(5)}>5</div>
                <div className={styles.florItem} onClick={() => homeStore.setShowFlor(6)}>6</div>
                <div className={styles.florItem} onClick={() => homeStore.setShowFlor(7)}>7</div>
                <div className={styles.florItem} onClick={() => homeStore.setShowFlor(0)}>返回</div>
            </div>
            <DeviceList />
        </div>
    );
}

export default Home;